<template>
  <div class="main-content">
    <div style="display: flex;grid-gap: 10px" >

<!--      分类-->
      <div style="width: 150px;padding: 10px;background-color: #eeeeee;">
        <div style="text-align: center;margin-bottom: 20px">
          <img src="@/assets/imgs/图书.png" style="width: 50%">
          <div style="font-size: 12px;color: saddlebrown">莫夫年华，阅读正当时</div>
        </div>
        <el-row :gutter="10">
          <el-col :span="12" style="text-align: center;margin-bottom: 10px" v-for="item in data.categoryList" :key="item.id">
            <a style="color: #333"  :href="'/front/categoryBook?name='+ item.title+'&categoryId=' + item.id">{{item.title}}</a>
          </el-col>
        </el-row>
      </div>
<!--      分类结束-->


<!--      轮播图-->
      <div style="flex: 1">
        <el-carousel height="360px">
          <el-carousel-item v-for="item in data.imgs" :key="item">
            <img :src="item" alt="" style="width: 100%;height: 360px">
          </el-carousel-item>
        </el-carousel>
      </div>
<!--      轮播图结束-->

<!--      排行榜-->
      <div style="width: 240px;padding: 10px">
        <div style="color: goldenrod;font-size: 20px;margin-bottom: 15px">图书借阅排行榜</div>
        <div @click="goPage('/front/bookDetail?id='+item.id)" v-for="(item,index) in data.rankBookList" :key="item.id"
             style="padding: 10px 0;cursor: pointer;border-bottom: 1px solid #ddd">

          <div style="display: flex;grid-gap: 10px" v-if="index===data.currentIndex">
            <div style="width: 10px;color: orangered;font-weight: bold">{{index+1}} </div>
            <div style="width: 50px">
              <img :src="item.img" style="width: 100%">
            </div>
            <div style="flex: 1;width: 0;font-size: 12px">
              <div style="margin-bottom: 5px" class="line1">{{item.name}}</div>
              <div style="color: #666" class="line2">{{item.descr}}</div>
            </div>
          </div>
          <div @mouseover="changeIndex(index)" v-else style="display: flex;grid-gap: 10px;align-items: center;font-size: 12px">
            <div style="width: 10px">{{index+1}}</div>
            <div style="flex: 1;width: 0" class="line1">{{item.name}}</div>
          </div>

        </div>
      </div>
<!--      排行榜结束-->




    </div>

    <div style="display: flex;grid-gap: 30px">
<!--      左边区域开始-->
      <div style="flex: 1">
        <div style="margin: 20px 0">
          <div style="padding-bottom: 10px;color: #1149a9;border-bottom: 1px solid #1149a9;margin-bottom: 10px">
            <strong style="font-size: 24px">新</strong> 书上架
          </div>
          <div>
            <el-row :gutter="20">
             <el-col @click="goPage('/front/bookDetail?id='+item.id)" :span="6" v-for="item in data.newBookList" :key="item.id" style="margin-bottom: 20px;cursor: pointer">
               <div class="book-box">
                 <img :src="item.img" style="width: 100%;height: 220px;border-radius: 5px">
               </div>
               <div style="margin: 5px 0" class="line1">{{item.name}}</div>
               <div style="margin: 5px 0;font-size: 12px;color: #666" class="line1">{{item.author}}</div>
               <div style="margin: 5px 0;font-size: 12px;color: #666">库存剩余:  {{item.num}}</div>
             </el-col>
            </el-row>
          </div>
        </div>

        <div style="margin: 20px 0">
          <div style="padding-bottom: 10px;color: orangered;border-bottom: 1px solid orangered;margin-bottom: 10px">
            <strong style="font-size: 24px">推荐</strong> 读物
          </div>
          <div>
            <el-row :gutter="20">
              <el-col @click="goPage('/front/bookDetail?id='+item.id)" :span="6" v-for="item in data.recommendBookList" :key="item.id" style="margin-bottom: 20px;cursor: pointer">
                <div class="book-box">
                  <img :src="item.img" style="width: 100%;height: 220px;border-radius: 5px">
                </div>
                <div style="margin: 5px 0" class="line1">{{item.name}}</div>
                <div style="margin: 5px 0;font-size: 12px;color: #666" class="line1">{{item.author}}</div>
                <div style="margin: 5px 0;font-size: 12px;color: #666">库存剩余:  {{item.num}}</div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
<!--     左边区域结束 -->
<!--      右边区域开始-->
      <div style="width: 300px">
        <div style="margin: 20px 0">
          <div style="padding-bottom: 10px;color: orange;border-bottom: 1px solid orange;margin-bottom: 10px">
            <strong style="font-size: 24px">读书</strong> 活动
          </div>
          <div>
            <div @click="goPage('/front/activityDetail?id='+item.id)"  v-for="item in data.activityList" :key="item.id" style="margin-bottom: 20px">
              <img :src="item.img" style="width: 100%;height: 125px">
              <div style="margin: 5px 0;font-size: 20px;color: #666" class="activity-item">{{item.name}}</div>
            </div>
          </div>
        </div>
      </div>
      <!--        右边区域结束-->
    </div>


  </div>

<!--  Footer-->
  <Footer  />
</template>

<script setup>
import request from "@/utils/request.js";
import {reactive} from "vue";
import img1 from '@/assets/imgs/l1.png'
import img2 from '@/assets/imgs/l2.png'
import img3 from '@/assets/imgs/l3.png'
import Footer from "@/components/Footer.vue";

const data=reactive({
  categoryList: [],
  imgs:[img1,img2,img3],
  rankBookList:[],
  currentIndex:0,
  newBookList:[],
  activityList:[],
  recommendBookList:[]
})

request.get('/category/selectAll').then(res=>{
data.categoryList=res.data
})

request.get('/book/selectAll').then(res=>{
  data.rankBookList=res.data.splice(0,5)
})

request.get('/book/selectAll').then(res=>{
  data.newBookList=res.data.splice(0,8)
})

request.get('/activity/selectAll').then(res=>{
  data.activityList=res.data.splice(0,4)
})

request.get('/book/selectAll',{
  params:{
    recommend:true
  }
}).then(res=>{
  data.recommendBookList=res.data.splice(0,8)
})


const changeIndex=(index)=>{
data.currentIndex=index
}

const goPage=(path)=>{
  location.href=path
}
</script>


<style scoped>
a:hover{
  color: red !important;
  text-decoration: underline;
  font-weight: bold;
}
.main-content{
  max-width: 1200px;
  margin: 10px auto;
}

.activity-item{
  cursor: pointer;
}

.activity-item:hover{
  color: #1890ff !important;
  text-decoration: underline;
}

.book-box{
  overflow: hidden;
}
.book-box:hover img{
  scale: 1.2;
}
.book-box img {
  transition: all 0.5s;
}
</style>